<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>步步街Hybrid布局演示</title>
<link rel="stylesheet" href="./css/h.css" />
<!--[if lt IE 9]>
<script src="./js/respond.min.js"></script>
<![endif]-->
<style type="text/css">
body{font-size:14px;line-height:20px;}
h1{ line-height:2em;margin:0; }
div.content {
  display:block;
  border:1px solid #666666;
  overflow:hidden;
  text-align:center;
  background:#F1F1F1;
  font-weight: bold;
  background:#F9F9F4 url(./img/grid_text.png) 1px 0 repeat;
  margin-right:0px;
}
div.content { border:2px solid #426FD9; background-color:#F2F2F2; min-height:20px; padding:0.25em; margin-right:0px; margin-bottom:10px; }
.rowo {
  width:auto;
  padding:3px 0;
  padding-left:10px;
  padding-right:10px;
}
address *{vertical-align:middle;font-family:Dotum;}
</style>
</head>
<body>
<div class="fillo"><h1>步步街Hybrid布局演示</h1></div>
<hr />
<div class="rowoing"><h2>步步街Hybrid布局L模式演示</h2></div>
<hr />
  <div class="fillo m">
      <div class="ming"><div class="content">m-default</div></div>
  </div>
  <hr />
  <div class="fillo mn">
      <div class="ming"><div class="content">m-default</div></div>
      <div class="n1"><div class="content">n-default<br /><br /></div></div>
  </div>
  <hr />
  <div class="fillo nm">
      <div class="ming"><div class="content">m-default</div></div>
      <div class="n1"><div class="content">n-default<br /><br /></div></div>
  </div>
  <hr />
  <div class="fillo mnn">
      <div class="ming"><div class="content">m-default</div></div>
      <div class="n1"><div class="content">n1-default<br /><br /><br /></div></div>
      <div class="n2"><div class="content">n2-default<br /><br /></div></div>
  </div>
  <hr />
  <div class="fillo nmn">
      <div class="ming"><div class="content">m-default</div></div>
      <div class="n1"><div class="content">n1-default<br /><br /><br /></div></div>
      <div class="n2"><div class="content">n2-default<br /><br /></div></div>
  </div>
  <hr />
  <div class="fillo nnm">
      <div class="ming"><div class="content">m-default</div></div>
      <div class="n1"><div class="content">n1-default<br /><br /><br /></div></div>
      <div class="n2"><div class="content">n2-default<br /><br /></div></div>
  </div>
<hr />
<div class="rowo"><h2>步步街Hybrid布局T模式演示</h2></div>
<hr />
<div id="bbody">
  <div class="fillo m">
      <div class="ming"><div class="content">m-default</div></div>
  </div>
  <hr />
  <div class="fillo mn">
      <div class="n1"><div class="content">n-default<br /><br /></div></div>
      <div class="ming"><div class="content">m-default</div></div>
  </div>
  <hr />
  <div class="fillo nm">
      <div class="n1"><div class="content">n-default<br /><br /></div></div>
      <div class="ming"><div class="content">m-default</div></div>
  </div>
  <hr />
  <div class="fillo mnn">
      <div class="n1"><div class="content">n1-default<br /><br /><br /></div></div>
      <div class="ming"><div class="content">m-default</div></div>
      <div class="n2"><div class="content">n2-default<br /><br /></div></div>
  </div>
  <hr />
  <div class="fillo nmn">
      <div class="n1"><div class="content">n1-default<br /><br /><br /></div></div>
      <div class="ming"><div class="content">m-default</div></div>
      <div class="n2"><div class="content">n2-default<br /><br /></div></div>
  </div>
  <hr />
  <div class="fillo nnm">
      <div class="n1"><div class="content">n1-default<br /><br /><br /></div></div>
      <div class="ming"><div class="content">m-default</div></div>
      <div class="n2"><div class="content">n2-default<br /><br /></div></div>
  </div>
</div>
<hr />
<div class="rowo"><h2>步步街Hybrid布局7模式演示</h2></div>
<hr />
  <div class="fillo m">
      <div class="ming"><div class="content">m-default</div></div>
  </div>
  <hr />
  <div class="fillo mn">
      <div class="n1"><div class="content">n-default<br /><br /></div></div>
      <div class="ming"><div class="content">m-default</div></div>
  </div>
  <hr />
  <div class="fillo nm">
      <div class="n1"><div class="content">n-default<br /><br /></div></div>
      <div class="ming"><div class="content">m-default</div></div>
  </div>
  <hr />
  <div class="fillo mnn">
      <div class="n1"><div class="content">n1-default<br /><br /><br /></div></div>
      <div class="n2"><div class="content">n2-default<br /><br /></div></div>
      <div class="ming"><div class="content">m-default</div></div>
  </div>
  <hr />
  <div class="fillo nmn">
      <div class="n1"><div class="content">n1-default<br /><br /><br /></div></div>
      <div class="n2"><div class="content">n2-default<br /><br /></div></div>
      <div class="ming"><div class="content">m-default</div></div>
  </div>
  <hr />
  <div class="fillo nnm">
      <div class="n1"><div class="content">n1-default<br /><br /><br /></div></div>
      <div class="n2"><div class="content">n2-default<br /><br /></div></div>
      <div class="ming"><div class="content">m-default</div></div>
  </div>
<hr />
<div class="rowo">
  <div id="colophon">
    <address style="text-align:center;">
      <img src="./img/logo_16px.gif" alt="" />&nbsp;<em>Copyright ©</em> <span><a href="http://www.bubujie.net/" target="_blank">步步街工作室</a> 2008-2012 All Rights Reserved.</span>
    </address>
  </div>
</div>
</body>
</html>
